<template>
  <view class="tabbar-container">
    <view class="tabbar">
      <view
        class="tab-item"
        v-for="(item, index) in tabList"
        :key="index"
        @click="onTabClick(item, index)"
      >
        <!-- 扫码按钮特殊处理 -->
        <view v-if="item.isScan" class="scan-button-wrapper">
          <view class="scan-button" @click.stop="onScanClick">
            <u-icon name="scan" :size="44" color="#fff"></u-icon>
          </view>
          <text class="tab-text scan-text">{{ item.title }}</text>
        </view>
        <!-- 普通Tab项 -->
        <view v-else class="tab-content">
          <u-icon
            :name="currentTab === index ? item.activeIcon : item.icon"
            :size="22"
            :color="currentTab === index ? '#2979ff' : '#bfbfbf'"
          ></u-icon>
          <text class="tab-text" :class="{ 'active': currentTab === index }">{{ item.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CustomTabbar',
  computed: {
    ...mapState('tabbar', ['tabList', 'currentTab'])
  },
  mounted() {
    this.updateTabByRoute()
  },
  onShow() {
    this.updateTabByRoute()
  },
  methods: {
    ...mapMutations('tabbar', ['setCurrentTab']),
    updateTabByRoute() {
      const page = getCurrentPages().slice(-1)[0]
      const path = '/' + page.route
      const idx = this.tabList.findIndex(item => item.url === path)
      if (idx !== -1) this.setCurrentTab(idx)
    },
    onTabClick(item, index) {
      if (item.isScan) {
        this.onScanClick()
        return
      }
      this.setCurrentTab(index)
      // 判断是否tabBar页面，tabBar页面用switchTab，非tabBar页面用navigateTo
      const tabBarPages = this.tabList.filter(tab => !tab.isScan).map(tab => tab.url)
      if (item.url && item.url !== this.$route.path) {
        if (tabBarPages.includes(item.url)) {
          uni.switchTab({ url: item.url })
        } else {
          uni.navigateTo({ url: item.url })
        }
      }
    },
    onScanClick() {
      uni.scanCode({
        success: (res) => {
          uni.showToast({ title: '扫码成功', icon: 'success' })
        },
        fail: (err) => {
          uni.showToast({ title: '扫码失败', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  .tabbar {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 0 10rpx 0;
    border-top: 1rpx solid #ececec;
    height: 100rpx;
    box-shadow: none;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    .tab-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8rpx 0 0 0;
    }
    .scan-button-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .scan-button {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #2979ff 60%, #5e96ff 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rpx;
        box-shadow: 0 2rpx 8rpx rgba(41,121,255,0.10);
      }
      .scan-text {
        color: #2979ff;
        font-weight: 500;
        font-size: 22rpx;
        margin-top: 2rpx;
      }
    }
    .tab-text {
      font-size: 22rpx;
      color: #bfbfbf;
      margin-top: 2rpx;
      font-weight: 400;
      &.active {
        color: #2979ff;
        font-weight: 600;
      }
    }
  }
}
</style> 